<template>
  <div>
    <el-table stripe="true" :data="tableData" style="width: 100%" >
      <el-table-column prop="roomnum" label="房号" width="80">
      </el-table-column>
      <el-table-column prop="shop" label="房间名称" width="100"></el-table-column>
      <el-table-column label="展示图" width="200">
        <template #default="scope">
          <el-image :src="scope.row.productImg" style="height:80px;width: 150px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="categoryname" label="类型" width="80"></el-table-column>
      <el-table-column label="是否上架" width="80">
        <template #default="scope">
          <p style="text-align: center">
            {{ scope.row.issell ? '上架' : '下架' }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="房间价格" width="80"></el-table-column>
      <el-table-column prop="oldprice" label="房间原价" width="80"></el-table-column>
      <el-table-column prop="id" label="编号" width="120"></el-table-column>
      <el-table-column prop="detail" label="房间详情" width="280"></el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="onEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog v-model="dialogFormVisible" title="编辑商品">
      <el-form>
        <el-form-item label="商品名称">
          <el-input v-model="shop" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="categoryname" placeholder="选择类型">
            <el-option label="标间" value="标间" />
            <el-option label="双人间" value="双人间" />
            <el-option label="大床房" value="大床房" />
            <el-option label="会议室" value="会议室" />
            <el-option label="高级别墅" value="高级别墅" />
            <el-option label="总统套房" value="总统套房" />
          </el-select>
        </el-form-item>
        <el-form-item label="房号">
          <el-col :span="11">
            <el-input v-model="roomnum" id="timi"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否上架">
          <el-radio-group v-model="issell">
            <el-radio label="0" size="large">下架</el-radio>
            <el-radio label="1" size="large">上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品价格" style="width: 50%">
          <el-input v-model="price" />
        </el-form-item>
        <el-form-item label="商品原价" style="width: 50%">
          <el-input v-model="oldprice" />
        </el-form-item>
        <el-form-item label="商品详情">
          <el-input v-model="detail" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogF">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Timer, Plus } from '@element-plus/icons-vue'
import { GoodsList, GoodsDelete, GoodsEdit } from '@/api/goods.js'
import { ref, onMounted, onBeforeMount } from 'vue'
//修改的信息
const _id = ref('')
const shop = ref('')
const price = ref('')
const oldprice = ref('')
const detail = ref('')
const issell = ref()
const roomnum = ref('')
const categoryname = ref('')

//编辑弹出框
const dialogFormVisible = ref(false)
const tableData = ref([])

//编辑
const onEdit = (list) => {
  _id.value=list._id
  shop.value=list.shop
  price.value=list.price
  oldprice.value=list.oldprice
  detail.value=list.detail
  categoryname.value=list.categoryname
  issell.value=list.issell
  roomnum.value=list.roomnum
  dialogFormVisible.value = true
}
//修改
const dialogF = async () => {
  let yesandno = confirm("确认修改？")
  if (yesandno == true) {
    let data = await GoodsEdit(_id.value, shop.value, price.value, oldprice.value, detail.value, categoryname.value, issell.value, roomnum.value)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      alert('修改成功')
      dialogFormVisible.value = false
      onGoodsList()
    } else {
      alert('修改失败')
    }
    return
  }
}


//删除
const onDelete = async (id) => {
  //确认删除？
  ElMessageBox.confirm('确认删除这个商品吗?', '提示信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const data = await GoodsDelete(id)
      let { resultCode, resultInfo } = data
      if (resultCode == 1) {
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
        onGoodsList()
      }
    })
}

//上传
const onGoodsList = async () => {
  let data = await GoodsList()
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    tableData.value = resultInfo.list

  }
}
onMounted(() => {
  onGoodsList()

})
</script>
<style scoped lang="scss">
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}



.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  border-left: 0;
}

.el-table {
  .el-table__column {
    text-align: center;

    .cell {
      text-align: center !important;
    }
  }
}
</style>
